window.onload = function () {

    show = document.getElementById( 'show' );
    var defaultShowHTML = show.innerHTML;
    var btns = document.getElementsByTagName( 'button' );

    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function(){
            var id = this.getAttribute('data-id');
            var components = document.getElementById( id );
            show.innerHTML = components.innerHTML;
            go( id );
        }
    }

    function go( id ){
        history.pushState( null, '', location.href.replace( /#.*/, '' ) + '#' + id );
    }
    function init(){
        var components = location.hash.replace( '#', '' );
        document.getElementById( 'show' ).innerHTML = ( document.getElementById( components ) &&  document.getElementById( components ).innerHTML ) || defaultShowHTML;
    }
    window.addEventListener('hashchange', init, false);
    init();
}